<template>
  <div class="load-overlay">
    <div class="spinner-back">
      <div class="iconLoader" id="spinner"></div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: "load-overlay"
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .load-overlay
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: hsla(0, 0%, 100%, .6);
    z-index: 9;
    .spinner-back
      position: relative;
      top: 26vh;
      height: 262px;
      width: 255px;
      background-image: url(../../../static/img/g-spinner-back.png);
      z-index: 9;
      margin: auto;
      #spinner
        float: left;
        margin-top: 98px;
        margin-left: 96px;
        height: 66px;
        width: 64px;
      #spinner:after
        content: "";
        background-image: url(../../../static/img/g-loader-64x64.gif);
        background-size: cover;
      .iconLoader:after
        animation: gig-infiniteRotate 2s linear infinite;
        box-sizing: border-box;
        font-size: 2.5em;
        height: 1.4em;
        left: 50%;
        line-height: 1em;
        margin-left: -.7em;
        margin-top: -.7em;
        padding-top: .2em;
        position: absolute;
        text-align: center;
        top: 50%;
        width: 1.4em;
  @-webkit-keyframes gig-infiniteRotate {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg)
    }
    to {
      -webkit-transform: rotate(1turn);
      transform: rotate(1turn)
    }
  }

  @keyframes gig-infiniteRotate {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg)
    }
    to {
      -webkit-transform: rotate(1turn);
      transform: rotate(1turn)
    }
  }
</style>
